<template>
	<view class="content">
		<view class="topbak" :style="{ height: sH +10+ 'px' }">
		</view>
		<view class="flex items-center tt_bag">
			<image src="@/static/left.png" mode="widthFix" style="width: 40rpx;" @click="back"></image>
			<view class="ser flex items-center">
				<image src="@/static/search.png" mode="widthFix" style="width: 40rpx;margin-right: 15rpx;"></image>
				<input confirm-type="search" @confirm="confirm" type="number" placeholder="请输入搜索内容" v-model="search" />
			</view>
		</view>
		<view class="history flex-col">
			<view class="o flex justify-between">
				<view class="h_o">
					搜索历史
				</view>
				<image src="@/static/del.png" mode="widthFix" style="width: 40rpx;" @click="del"></image>
			</view>
			<view class="t">
				<view class="h_t flex-center" v-for="(item,index) in hy" @click="zccx(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="result">
			<view class="title" v-show="i.length">
				搜索结果
			</view>
			<view class="infok" v-for="(i,index) in i"
				@click="$msg.Navigoto('/pages/Alldetail_d/Alldetail_d?curNow='+i.product_type+'&id='+i.id)">
				<view class="qu flex items-center">
					<view class="  flex-center" :class="i.blue">
						{{i.product_type==2?'取':i.product_type==3?'锁':i.product_type==1?'服':'车'}}
					</view>
					<view class="q_w    ">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class=" flex-center" :class="i.white">
						{{i.product_type==2?'收':'目'}}
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="i.is_door==1">
						上门安装
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				i: [],
				search: '',
				sH: '',
				searchHistory: '',
				hy: []

			}
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.reslo()
			this.history()
		},


		methods: {
			del() {
				this.hy = []
				uni.removeStorage({
					key: 'history'
				})
			},
			history() {
				this.hy = uni.getStorageSync('history')
				console.log(uni.getStorageSync('history'));
			},
			confirm() {
				this.rider_order_search()
			},
			back() {
				uni.navigateBack()
			},
			reslo() {
				let app = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						app.lat = res.latitude
						app.lng = res.longitude
						console.log('当前位置的纬度：' + res.latitude);
					},
					fail(err) {
						console.log(err, 'err');
					}
				});
			},
			zccx(search) {
				this.$api.rider_order_search({
					search,
					lat: this.lat,
					lng: this.lng
				}).then(res => {
					console.log(res);
					this.i = res.data
				})
			},
			rider_order_search() {
				if (!this.search) {
					uni.showToast({
						icon: 'none',
						title: '搜索内容不能为空!'
					})
					return
				}
				this.$api.rider_order_search({
					search: this.search,
					lat: this.lat,
					lng: this.lng
				}).then(res => {
					console.log(res);
					if (res.data.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '未查询到该订单!'
						})
					}
					let val = uni.getStorageSync('history');
					val = val || [];
					if (!val.includes(this.search)) {
						val.push(this.search);
						val.sort();
						uni.setStorageSync('history', val);
					}
					this.search = ''
					this.history()
					this.i = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 115rpx;

		.tt_bag {
			margin-left: 18px;
			width: 100%;

			.ser {
				margin-left: 24rpx;
				padding: 18rpx 16rpx;
				width: 430rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.history {
			width: 700rpx;
			margin: 40rpx;

			.o {
				.h_o {
					font-weight: bold;
					font-size: 32rpx;
					color: #00091A;
				}
			}

			.t {
				margin: 16rpx 0 80rpx 0;

				.h_t {
					margin: 10rpx;
					display: inline-block;
					padding: 8rpx 24rpx;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					font-size: 28rpx;
					color: #333A47;
				}
			}
		}

		.result {
			width: 700rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #00091A;
			}

			.infok {
				padding: 24rpx;
				margin-top: 45rpx;
				width: 686rpx;
				// height: 436rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.title {
					.t_o {
						font-weight: bold;
						font-size: 36rpx;
						color: #FF6401;

						.ji {
							color: #FFFFFF;
							font-size: 24rpx;
							width: 40rpx;
							height: 40rpx;
							background: #FF6401;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}

					.t_w {
						font-weight: bold;
						font-size: 28rpx;
						color: #3377FF;
					}
				}

				.qu {

					padding-left: 10rpx;

					.q_o {
						width: 40rpx;
						height: 40rpx;
						background: #F7FAFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #3377FF;
					}

					.q_o_o {
						width: 40rpx;
						height: 40rpx;
						background: #3377FF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #FFFFFF;
					}

					.q_o_b {
						width: 40rpx;
						height: 40rpx;
						background: #F7FAFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #3377FF;
					}

					.q_o_w {
						width: 40rpx;
						height: 40rpx;
						background: #F7FAFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #3377FF;
					}

					.q_w {
						padding-left: 42rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #00091A;
						width: 558rpx;
					}

					.q_o_t {
						width: 40rpx;
						height: 40rpx;
						background: #3377FF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #FFFFFF;
					}

					.q_o_d {
						width: 40rpx;
						height: 40rpx;
						background: #F7FAFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 20rpx;
						color: #3377FF;
					}
				}

				.info {
					margin-top: 15rpx;

					.o {
						font-size: 20rpx;
						color: #999CA3;
					}

					.t {
						font-weight: bold;
						margin-left: 35rpx;
						font-size: 28rpx;
						color: #333A47;
						margin-top: 5rpx;
					}

					.h {
						margin-left: 35rpx;
						font-size: 28rpx;
						color: #999CA3;
						margin-top: 5rpx;
					}

					.f {
						margin-left: 24rpx;
						width: 112rpx;
						height: 48rpx;
						background: #3377FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.butgp {
					margin-top: 30rpx;

					.t_w {
						width: 160rpx;
						height: 68rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #CCCED1;
						font-size: 28rpx;
						color: #666B75;
					}

					.t_w_h {
						width: 160rpx;
						height: 68rpx;
						background: #3377FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #ffffff;
						margin-left: 24rpx;
					}

					.o {
						width: 230rpx;
						height: 100rpx;
						background: #F7F7F7;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 32rpx;
						color: #333A47;
					}

					.t {
						margin-left: 24rpx;
						width: 384rpx;
						height: 100rpx;
						background: #3377FF;
						box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.t_jd {
						width: 638rpx;
						height: 100rpx;
						background: #3377FF;
						box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						color: #FFFFFF;
					}
				}
			}

			.cont {
				margin-top: 24rpx;
				padding: 24rpx;
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.botbg {
					position: absolute;
					bottom: -89rpx;
					width: 700rpx;
				}

				.c_t {
					.xcimg {
						margin: 24rpx auto 0 auto;
						padding: 32rpx 24rpx;

						.zwt {
							width: 200rpx;
							height: 200rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}

						.baginfo {
							margin-left: 24rpx;

							.o {
								font-weight: bold;
								font-size: 32rpx;
								color: #00091A;
							}

							.t {
								font-size: 28rpx;
								color: #999CA3;
							}

							.h {
								font-size: 28rpx;
								color: #00091A;
								text-align: right;
							}
						}
					}
				}

				.zhjg {
					margin-top: 26rpx;
					width: 638rpx;
					padding: 24rpx;
					background: #F7F7F7;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.btngp {
					.b_o {
						margin: 24rpx;
						width: 160rpx;
						height: 68rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #CCCED1;
						font-size: 28rpx;
						color: #666B75;
					}

					.b_t {
						margin: 24rpx 0;
						width: 160rpx;
						height: 68rpx;
						background: #3377FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>